<template>
  <div class="refund border-bottom">
    <div class="item border-right" v-for="item in dataList" :key="item.id">
      <div class="top">
        {{item.name}}
      </div>
      <div class="bottom">
        {{item.rate}}
      </div>
    </div>
  </div>
</template>

<script>

export default {
  props: {
    dataList: {
      type: Array,
      default: function() {
        return [
          {
            id: 1,
            name: '彩票返点',
            rate: '2.5%'
          },
          {
            id: 2,
            name: 'AG返点',
            rate: '1.00%'
          },
          {
            id: 3,
            name: '皇冠返水',
            rate: '1.25%'

          },
          {
            id: 4,
            name: '工资',
            rate: '0.05%'

          },
          {
            id: 5,
            name: '分红',
            rate: '0.00%'
          }
        ]
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
  .refund 
    display flex 
    flex-wrap wrap
    background #fff 
    box-sizing border-box 
    padding 0 10px
    .item 
      height 40px 
      display flex 
      flex-direction column 
      justify-content space-around
      align-items center
      box-sizing border-box 
      margin 10px 0
      width calc((100% - 4px) / 4)
      .top 
        color $color-sub-grey
      .bottom 
        color $color-theme-red
</style>
